<template>
  <back-dialog-base
    :title="title"
    :visible="RelVisibleDialog"
    width="38%"
    @close="clear"
    @onCommit="handleSubmit"
    destroy-on-close
  >
    <template #content>
      <div class="content-wrap">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="96px">
          <div class="title-header">是否确定解除当前警报！</div>

          <el-form-item label="解除原因：" prop="dealOpinion">
            <el-input v-model="form.dealOpinion" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="解除人：" prop="dealUser">
            <el-input v-model="form.dealUser" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="解除时间：" prop="dealTime">
            <el-date-picker
              v-model="form.dealTime"
              type="datetime"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="YYYY-MM-DD h:m:s "
            />
          </el-form-item>
          <!-- <el-form-item label="处置图片：" prop="fileInfoList">
            <el-upload
              v-model:file-list="fileInfoList"
              :action="url"
              ref="uploadFile"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
              :limit="3"
              ><el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item> -->
        </el-form>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch, unref } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { clearSave } from '@/api/maintain'
import { message } from '@/utils/message'
import store from '@/store'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  RelVisibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const token = store.getters.token
const dialogVisible = ref(false)
const dialogImageUrl = ref()
const uploadFile = ref(null)
const url = ref(process.env.VUE_APP_BASE_API + '/file/upload')
const emits = defineEmits(['onReload'])
const formRef = ref(null)
const fileInfoList = ref([])
const filesInfo = ref([])
const form = reactive({
  dealOpinion: '',
  dealUser: '',
  dealTime: ''
})
const rules = reactive({
  dealOpinion: [{ required: true, message: '请输入解除原因', trigger: 'blur' }],
  dealUser: [
    {
      required: true,
      message: '请输入处置人',
      trigger: 'blur'
    }
  ],
  dealTime: [
    {
      required: true,
      message: '请输入处置时间',
      trigger: 'blur'
    }
  ]
})

// const handlePictureCardPreview = (file) => {
//   dialogImageUrl.value = file.url
//   dialogVisible.value = true
// }
// const handleAvatarSuccess = (file) => {
//   filesInfo.value.id = file.data.id
//   filesInfo.value.fileName = file.data.filename
//   filesInfo.value.fileSize = file.data.size
//   filesInfo.value.fileUrl = file.data.url
//   filesInfo.value.type = file.data.contextType
//   console.log(
//     'fileInfoList.value,',
//     filesInfo.value,
//     'fileInfoList.value',
//     file.data
//   )
// }
// const handleRemove = (file) => {
//   console.log(file)
// }

const handleSubmit = () => {
  // console.log(form.fileList)
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      // save(Object.assign(props.rowData, form))
      save(form)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const save = async (data) => {
  console.log(filesInfo.value)
  const res = await clearSave({
    problemNo: props.rowData.problemNo,
    dealOpinion: data.dealOpinion,
    dealStatus: data.dealStatus,
    dealType: data.dealType,
    dealUser: data.dealUser,
    id: props.rowData.id
  }).then((res) => {
    message({ type: 'success', message: '保存成功!' })
    clearForm()
    emits('onReload')
  })
}

const clear = () => {
  const form = unref(formRef)
  form.resetFields()
}

const clearForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  form.value = {
    dealOpinion: '',
    dealUser: '',
    dealTime: '',
    relationId: ''
  }
}
</script>

<style lang="scss" scoped>
.font {
  font-size: 16px;
  font-family: Source Han Sans CN;
  color: #333333;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
  width: 100%;
}
.content-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 13px;
  .title-header {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 580;
    font-size: 20px;
    color: #333333;
  }
  :deep(.el-upload--picture-card) {
    width: 85px;
    height: 85px;
  }
}
:deep(.el-upload--picture-card i) {
  top: -24px;
}
:deep(.el-form) {
  width: 100%;
}
:deep(.el-form-item) {
  width: 100%;
}
</style>
